<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>管理员登录</title>
    <link href="./Public/Admin/Css/public.css" rel="stylesheet" type="text/css"/>
    <link href="./Public/Admin/Css/login.css" rel="stylesheet" type="text/css"/>
    <script src="./Public/Admin/Js/jquery.js"></script>
    <script type="text/javascript">
        //初始设置用户名为当前焦点
        function SetFocus() {
            if (document.form1.username.value == "") {
                document.form1.username.focus();
            } else {
                document.form1.username.select();
            }
        }

        //发送ajax请求获取数据，将返回的提示信息封装到模态框中显示
        function commit() {
            let data = $("#form1").serialize();
            $.post("?c=User&a=loginCheck", data, (message) => {
                $("#tipsMsg").html(JSON.parse(message).msg);
                $("#showMessage").show(500);
                setTimeout(() => {
                    $("#showMessage").hide(600);
                    //验证通过才能跳转
                    if (JSON.parse(message).flag){
                        window.location.href="./admin.php";
                    }
                }, 1000)
            })
        }
    </script>
</head>
<body>
<form id="form1" name="form1" method="post" action="?c=User&a=loginCheck" id="form1" onSubmit="return checkForm();">
    <div id="position">
        <div id="inposition">
            <div class="login-left">
                <div class="login-left-logo"><img src="./Public/Admin/Images/huaxin2.png" width="296" height="50"/>
                </div>
                <div class="login-left-content">
                    <ul>
                        <li>如果一个人不知道他要驶向哪头，那么任何风都不是顺风。——塞涅卡</li>
                        <li>所有坚韧不拔的努力迟早会取得报酬的。——安格尔</li>
                        <li>青春的幻想既狂热又可爱。——约肖特豪斯</li>
                        <li>成功毫无技巧可言，我一向只对工作尽力而为而已。——卡耐基</li>
                    </ul>
                </div>
            </div>
            <div class="login-right">
                <div id="UpdatePanel1">
                    <div class="login-right-title">网站后台管理系统</div>
                    <div class="login-right-input">
                        <table width="200" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td nowrap="nowrap" align="right" id="tdLeft">用户名：</td>
                                <td><input name="username" type="text" id="username" class="input" size="10"
                                           maxlength="20"/></td>
                            </tr>
                            <tr>
                                <td style="height:30px" align="right">密&nbsp;&nbsp;码：</td>
                                <td style="height:30px"><input name="password" type="password" id="password"
                                                               class="input" size="10" maxlength="32"/></td>
                            </tr>
                            <tr>
                                <td align="right">验证码：</td>
                                <td><input id="verify" name="verify" class="input2" maxlength="4">&nbsp;<img
                                        style="float:right;cursor:pointer;" width="70" src="?c=User&a=captcha"
                                        onClick="this.src='?c=User&a=captcha&'+Math.random()"/></td>
                            </tr>
                            <tr>
                                <td style="height: 30px" align="right"></td>
                                <td style="height: 30px" class="btns">
                                    <input type="button" name="btnLogin" value="登 录" id="btnLogin" class="button" onclick="commit()"/>
                                    <input type="reset" name="btnTest" value="清 除" id="btnTest" class="button"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<!--顶部背景DIV-->
<div id="header">科技改变未来！</div>
<!--欢迎光临-->
<div id="content"><img src="./Public/Admin/Images/login-wel.gif"/></div>
<div id="buttom">
    <div class="copy2">
        <span>Copyright &copy; 2020-<?php echo date("Y")?>&nbsp;&nbsp;SunQiXin 鲁ICP备20005824号</span>
    </div>
    <div class="copy"><img src="./Public/Admin/Images/login-copy.gif"/></div>
</div>
<!--  模态对话框-->
<div id="showMessage"><br>
    <div id="myToast">
        <div class="toast-header">
            <img src="./Public/Admin/Images/huaxin.png" alt="" width="30">
            <strong>提示</strong>
            <small>1分钟前</small>
            <button>&times;</button>
        </div>
        <div id="tipsMsg">
            注册成功！
        </div>
    </div>
</div>
<!--  模态对话框-->
</body>
</html>
<script language="javascript">
    SetFocus();

    function checkForm() {
        //定义用户名、密码正则表达式
        let reg1 = /^(\w{3,15})$/;
        if (!reg1.test(document.form1.username.value)) {
            alert("用户名称没有填写或格式不正确！");
            document.form1.username.focus();
            return false;
        } else if (!reg1.test(document.form1.password.value)) {
            alert("用户密码没有填写或格式不正确！");
            document.form1.password.focus();
            return false;
        }
    }
</script>